<template>
   <div class="box_load">
       <div class="load_anim">
           <span>加载中</span>
           <span class="word"></span>
       </div>
   </div>
</template>

<script>
export default {
    name: "LoadTheAnimation"
}
</script>

<style scoped>
.box_load{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    background: rgba(239, 239, 239, 0.3);
}
.load_anim {
    position: fixed;
    display: flex;
    min-width: 80px;
    font-size: 17px;
    letter-spacing: 1px;
}

.word::after{
    display: inline-block;
    content: '...';
    animation: words 2s ease-in-out 0s infinite;
}
@keyframes words {
    0% {
        content: '..'
    }
    25% {
        content: '...'
    }
    50% {
        content: ''
    }
    75% {
        content: '.'
    }
    100% {
        content: '..'
    }

}
</style>